<template>
	<view class="status-bar" :style="{height:statusBarHeight+'px'}" ref="statusBar">
     
	</view>
</template>

<script setup lang="ts">
    import { ref  ,onMounted,onUnmounted} from 'vue';
    import { useScreenStore } from '@/stores/modules/screen';
    type Props = {
        height: Number | null;
        type: String;
    };
    
    const props = defineProps<Props>();
    
    // const emit = defineEmits(['changeTabType']);
    
    // const changeTab = (item: Item) => {
    //   emit('changeTabType', item.type);
    // };

    const statusBarHeight = ref<number>(0)

    onMounted(() => {
      window.addEventListener('resize', () => {
        console.log('assd',useScreenStore().updateWindowHeight());
        statusBarHeight.value = useScreenStore().windowHeight;
     });
    })
    // 组件卸载时移除事件监听器，避免内存泄漏
    onUnmounted(() => {
      window.removeEventListener('resize', () => {});
    });
    </script>

<style scoped lang="scss">
	.status-bar {
		width: 100%;
		background: #fff;
		// height: var(--status-bar-height);
		// height: 200px;
		// background: red;
	}
</style>